<template>
    <div style="text-align: center;margin-top: 180px;">
        <h2>欢迎使用学生宿舍管理系统</h2>
        <div class="login">
            <h3 style="color:#fff">管理员登录</h3>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" style="width: 260px;height: 40px;" placeholder="账号" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" style="width: 260px;height: 40px;" type="password" placeholder="密码" show-password />
                </el-form-item>
                <el-button type="primary" style="width: 260px;height: 40px; margin-top: 18px;"
                    @click="submitForm">登录</el-button>
            </el-form>
            <div class="bottom-links">
                <router-link to="/changepassword"
                    style="text-decoration: none; margin-right: 133px;color:#fff">修改密码</router-link>
                <router-link to="/register" style="text-decoration: none;color: #fff;">注册账号</router-link>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

const loginFormRef = ref(null)
const loginForm = ref({
    username: '',
    password: ''
})

const rules = {
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ]
}

const router = useRouter() // 获取路由实例  

const submitForm = () => {
    if (!loginFormRef.value) return
    
    loginFormRef.value.validate((valid) => {
        if (valid) {
            let flag = contains(loginForm.value.username, loginForm.value.password);
            if (flag) {
                ElMessage({
                    showClose: true,
                    message: '登录成功',
                    type: 'success',
                })
                setTimeout(() => {
                    router.push('/index')
                }, 1000)
            } else {
                ElMessage({
                    showClose: true,
                    message: '账号或密码错误',
                    type: 'error',
                })
            }
        }
    })
}

//请求后端数据，以数组的形式返回
const user = ref([]);

//发送异步请求，获取数据
onMounted(async () => {
    const response = await axios.get('http://localhost:8080/login');
    user.value = response.data;
});

//判断输入的账号密码是否存在数据库中
function contains(username, password) {
    for (let i = 0; i < user.value.length; i++) {
        let obj = user.value[i];
        const mysqlUsername = obj.username;
        const mysqlPassword = obj.password;
        if (username === mysqlUsername && password === mysqlPassword) {
            return true;
        }
    }
    return false;
}

</script>

<style scoped>
body {
    margin: 0;
    padding: 0;
    background: url(../assets/images/back.jpg) no-repeat;
    background-size: cover;
    height: 100%;
}

br {
    color: red;
}

h2 {
    color: #f1ffff;
    font-size: 24px;
    font-weight: 400;
}

.login {
    margin: 0 auto;
    width: 400px;
    height: 319px;
    text-align: center;
    background: rgba(255, 255, 255, .3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding-bottom: 20px;
}

.login h3 {
    padding-top: 33px;
    font-size: 23px;
    font-weight: 400;
    margin-bottom: 20px;
}

.login :deep(.el-form) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login :deep(.el-form-item) {
    margin-bottom: 15px;
}

.login .bottom-links {
    width: 100%;
    position: absolute;
    bottom: 20px;
    left: 0;
    text-align: center;
}

.password {
    margin-top: 13px;
}
</style>
